<template>
	<view>
		<view class="bb px15 py10 bg-fff">
			<u-input
				disabled-color="#fff"
				placeholder="请输入报销金额"
				border="none"
				fontSize="28"
				v-model="money"
				:clearable="true"
				type="text"
				maxlength="11"
			>
				<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
					<view class="dis-flex flex-align-center">
						<text class="c-red">*</text>
						<view class="fs14 c-333">报销金额</view>
					</view>
				</view>
			</u-input>
		</view>
		<view class="bb px15 py10 bg-fff">
			<u-input
				disabled-color="#fff"
				placeholder="请输入报销种类"
				border="none"
				fontSize="28"
				v-model="type"
				:clearable="true"
				type="text"
				maxlength="30"
			>
				<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
					<view class="dis-flex flex-align-center">
						<text class="c-red">*</text>
						<view class="fs14 c-333">报销种类</view>
					</view>
				</view>
			</u-input>
		</view>
		<view class="bb px15 bg-fff dis-flex">
			<view class="dis-flex py10" style="width: 180rpx">
				<text class="c-red">*</text>
				<view class="fs14 c-333">费用明细</view>
			</view>
			<view class="flex">
				<u-textarea :placeholderStyle="{'font-size':'28rpx','color':'#C0C4CC'}" v-model="beizhu"
				 border="none" confirmType="done" placeholder="请输入费用明细" maxlength="100" :height="150"></u-textarea>
			</view>
		</view>
		<view class="bb px15 bg-fff dis-flex py10">
			<view class="dis-flex" style="width: 180rpx">
				<text class="c-red">*</text>
				<view class="fs14 c-333">图片</view>
			</view>
			<view class="flex">
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					width = "100"
					height = "100"
					name="1"
					multiple
					:maxCount="5"
				></u-upload>
			</view>
		</view>
		<view class="bb px15 bg-fff py10">
			<view class="dis-flex">
				<text class="c-red">*</text>
				<view class="fs14 c-333">用户审批集合</view>
			</view>
			<view class="dis-flex flex-wrap">
				<view v-for="(item, index) in selectList" :key="index" class="dis-flex flex-center ml10 mt10" @tap="select(index)">
					<view v-if="item.name" class="dis-flex flex-align-center bg-f8f px10 br5 py2">
						<view class="fs14 c-333">{{item.name}}</view>
						<view class="ml5" @click.stop="deleteItem(index)">
							<u-icon name="close" size="30"></u-icon>
						</view>
					</view>
					<view v-else class="bg-f8f br5 dis-flex flex-center px15 py15">
						<u-icon name="plus" color="#5B769F" size="40"></u-icon>
					</view>
					<u-icon name="arrow-right-double" class="ml10"></u-icon>
				</view>
				<!-- <view class="dis-flex flex-center ml10 mt10">
					<view class="dis-flex flex-align-center bg-f8f px10 br5 py2">
						<view class="fs14 c-333">姓名</view>
						<view class="ml5">
							<u-icon name="close" size="30"></u-icon>
						</view>
					</view>
					<u-icon name="arrow-right-double" class="ml10"></u-icon>
				</view> -->
			</view>
			<!-- <view class="dis-flex flex-center mt5">
				<view class="dis-flex flex-align-center bg-f8f" style="width: 200rpx;">我是名称</view>
			</view> -->
		</view>
		<view class="center mt20">
			<button class="btn-submit bg-common c-fff" :loading="submitLoading" @tap="formSubmit">确定</button>
		</view>
		<view style="height: 30rpx;"></view>
		<u-picker @confirm="confirm" :show="show" :columns="shenheList" itemHeight="80" :closeOnClickOverlay="true" @close="show = false" keyName="name"></u-picker>
	</view>
</template>

<script>
	import validate from "../../common/thformvalidate";
	export default {
		data() {
			return {
				money:'',
				type:'',
				beizhu:'',
				fileList1: [],
				
				submitLoading:false,
				
				shenheList:[],
				show:false,
				
				clickIndex:-1,  //点击位置
				selectList:[
					{
						name:'',
						id:''
					}
				]
			}
		},
		onLoad(){
			this.getList();
		},
		methods: {
			
			/**
			 * 选择审批结合
			 */
			select(index){
				this.show = true;
				this.clickIndex = index;
			},
			
			getList(){
				this.$http.get('/api/index/selectindex', {
				}, {
					log: true,
				}).then((res) => {
					if(res.data){
						this.shenheList.push(res.data);
					}
				})
			},
			
			confirm(e) {
				console.log('confirm', JSON.stringify(e))
				this.selectList[this.clickIndex].name = e.value?.[0].name;
				this.selectList[this.clickIndex].id = e.value?.[0].id;
				this.selectList.push({
						name:'',
						id:''
					})
				this.show = false
			},
			
			/**
			 * 删除
			 */
			deleteItem(index){
				this.selectList.splice(index,1);
			},
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log('name',event.name)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$store.state.host + this.$config.UrlSignUpload,
						filePath: url,
						name: 'file',
						formData: {
						},
						header:{
							'token':uni.getStorageSync('login_atk')
						},
						success: (res) => {
							let mData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
							console.log('测试',JSON.stringify(mData.data))
							setTimeout(() => {
								resolve(mData.data)
							}, 1000)
						}
					});
				})
			},
			
			
			
			
			
			
			
			
			
			
			switchChange(e){
				this.addressData.status = e.detail.value?1:0;
			},
			
			openAddres() {
				this.$api.openWindow('/pages/center/selectArea');
			},
			
			
			formSubmit(e){//提交
				var formData = {
					money:this.money,
					type:this.type,
					beizhu:this.beizhu
				};
				let formRule = [//表单规则
					{name:"money", notnull:true, checkType : "price",  title:"报销金额"},
					{name:"type", notnull:true, checkType : "",  title:"报销种类"},
					{name:"beizhu", notnull:true, checkType : "",  title:"费用明细"}
				];
				if(!validate.check(formData, formRule)) return;
				// var ajaxUrl = (this.manageType==='1')?this.$config.UrlEditAddress:this.$config.UrlAddAddress;
				// if(this.manageType==='1'){
				// 	formData.id = this.addressData.id;
				// }
				if(this.fileList1.length == 0){
					this.$api.toast('请上传图片')
					return;
				}
				let mImages = '';
				this.fileList1.forEach(item=>{
					if(item?.url?.url){
						if(!mImages) mImages = item?.url?.url;
						else mImages += ',' + item?.url?.url;
					}
				})
				if(!mImages){
					this.$api.toast('请上传图片');
					return;
				}
				formData.images = mImages;
				
				let mIds = '';
				this.selectList.forEach(item=>{
					if(item.id){
						if(!mIds) mIds = item.id;
						else mIds += ',' + item.id;
					}
				})
				if(!mIds){
					this.$api.toast('请选择用户审批集合');
					return;
				}
				formData.user_ids = mIds;
				
				this.submitLoading = true;
				this.$http.post('api/index/qkadd',formData,{
					header:{
						'content-type': "application/json",
					}
				}).then((res)=>{
					if(res.code == 1){
						this.$api.alert(res.msg,()=>{
							this.$api.opener().refreshList();
							this.$api.back();
						})
					}else this.$api.toast(res.msg);
				}).finally((res)=>{
					this.submitLoading = false;
				})
			},
		}
	}
</script>

<style>
	
</style>
